<template>
  <div class="table_container">
    <div class="title">
      {{ t("dashboard.myApproval") }}
      <span :style="{ color: 'var(--el-color-primary)' }"
        >({{ approvalData.length || 0 }})</span
      >
    </div>

    <div class="table_area">
      <div v-if="loading" class="skeleton_box">
        <el-skeleton style="margin: 0 20px; width: 90%" :rows="6" animated />
      </div>
      <template v-else>
        <el-table
          ref="assetsTableRef"
          height="100%"
          v-loading="loading"
          :data="approvalData"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column   :label="t('tableColumns.operation')"  align="center" fixed width="100">
            <template #default="{ row }">
              <div class="operate_link_btn">
                <el-link
                  type="primary"
                  :underline="false"
                  :icon="Edit"
                  :disabled="row.flowStatus != 0 ? true : false"
                  @click="openAddOrEdit(['approval', 'approval'], row)"
                >
                  {{ t("button.approval") }}</el-link
                >
              </div>
            </template>
          </el-table-column>

          <template v-for="(item, index) in columns" :key="item.key">
            <el-table-column
              v-if="item.visible"
              :prop="item.prop"
               :label="t(`tableColumns.${item.langKey}`)"
              :width="item.width"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <div
                  v-if="item.prop == 'flowNo'"
                  :style="{
                    color: colors.primaryColor,
                    cursor: item.isclick ? 'pointer' : '',
                  }"
                  @click="openAddOrEdit(['approval', 'detail'], row)"
                >
                  {{ row.flowNo }}
                </div>
                <el-tag
                  v-else-if="item.prop == 'auditStatus'"
                  :type="
                    row.auditStatus == 2
                      ? 'success'
                      : row.auditStatus == 0 || row.auditStatus == 1
                      ? 'warning'
                      : 'danger'
                  "
                >
                  {{
                    filterStatus(
                      row.auditStatus,
                      "approvalStatusByMyself",
                      "id",
                      "langKey"
                    ) || "无"
                  }}</el-tag
                >
                <span v-else-if="item.prop == 'addDatetime'">
                  {{ parseTime(row[item.prop], "{y}-{m}-{d}") || "无" }}
                </span>
                <span v-else>{{ row[item.prop] || "无" }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </template>
    </div>

    <!-- 审批对话框  -->
    <approvalDialog
      v-if="operate.openObj.visible"
      ref="addOrEditDialogRef"
      :loadingApproval="loadingApproval"
      v-model:add-edit-info="operate"
      @submitApproval="submitApproval"
      @cancel="cancel"
    ></approvalDialog>
  </div>
</template>

<script setup name="AssetisList">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import colors from "@/assets/styles/variables.module.scss";
import { Edit, Delete } from "@element-plus/icons-vue";
import approvalDialog from "../../views/assetsManage/assetsApproval/components/approvalDialog.vue";
import {
  GetApprovalList,
  AuditApproval,
  getApprovalDetail,
} from "@/api/assetsManage/approval";
import { getUserInfo } from "@/utils/auth";
import { ElMessage, ElMessageBox } from "element-plus";
import { approvalByMySelfColums } from "@/utils/table/columns";
import { approvalStatusByMyself } from "@/utils/statuData";
const { proxy } = getCurrentInstance();

const approvalData = ref([]); //资产列表数据
const loading = ref(false);
const loadingApproval = ref(false); //获取审批明细
const columns = approvalByMySelfColums;

const searchInfo = reactive({
  flowStatus: 1, //审批中的为流转到我
});
const operate = reactive({
  openObj: {
    visible: false,
    openKey: "", //add edit detail
    openType: "", //维修 报废 退还 领用....
    openTitle: "",
    tableTitle: "",
    addLoading: false, //防止重复提交
  },
  formInfo: {},
  tableData: [],
});

const addOrEditRef = ref(null);
//1111获取列表
const queryList = () => {
  const params = {
    type: 1,
    // userId: parseInt(JSON.parse(getUserInfo()).userId),
    userId: JSON.parse(getUserInfo()).userId,
    ...searchInfo,
  };
  loading.value = true;
  GetApprovalList(params)
    .then((res) => {
      loading.value = false;
      approvalData.value = res.output;
      // approvalData.value = []
    })
    .catch((err) => {
      loading.value = false;
    });
};

//222添加修改相关
const openAddOrEdit = (typeKey, row) => {
  const type = typeKey[0];
  const key = typeKey[1];
  // const title = '单据审批'
  const title = `
  <span style="font-size:12px;color:#111">${row.flow_TypeName}</span>
  ${"<br/>"} <span style="font-size:14px;">${row.title}</span>`;
  operate.openObj = {
    visible: true,
    openKey: key,
    openType: type,
    openTitle: title,
    tableTitle: "单据资产明细",
    addLoading: false,
  };

  operate.formInfo = {
    ...row,
  };
  queryApprovalDetail();
};

const submitApproval = async (key, info) => {
  const params = {
    flowNo: info.flowNo,
    auditId: info.auditId,
    auditStatus: key == "pass" ? 2 : 3,
    causeRejection: key == "pass" ? "" : info.rejectReason,
  };
  const msg = key == "pass" ? "通过" : "驳回";
  console.log("canshu ", params);
  // return
  try {
    await AuditApproval(params);
    await ElMessage({
      message: `单据: ${info.flowNo} 审批已${msg}`,
      type: "success",
    });
    await cancel();
    await queryList();
  } catch (error) {}
};

const queryApprovalDetail = () => {
  const params = {
    flowNo: operate.formInfo.flowNo,
    flowTypeId: operate.formInfo.flowTypeId,
  };
  loadingApproval.value = true;
  console.log("详情参数", params);
  getApprovalDetail(params)
    .then((res) => {
      operate.tableData = res.output;
      loadingApproval.value = false;
    })
    .catch(() => {
      operate.tableData = [];
      loadingApproval.value = false;
    });
};

const cancel = () => {
  operate.openObj.visible = false;
  operate.tableData = [];
};

onMounted(() => {
  queryList();
});
</script>
<style lang="scss" scoped>
.table_container {
  padding: 0;
  .title {
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-weight: bolder;
    font-size: 18px;
    margin: 20px 0;
  }
}
</style>
